<template>
  <div>
    <div style="float: left;width: 23%;">
      <div
        shadow="never"
        :style="{width : '100%',  height: documentHeight + 'px',background:'#151e2d', color: '#fff'}"
      >
        <treehead :clickTreeNode="clickTreeNode"></treehead>
        <datatree @addflow="addflow" @addtabs="addtabs"></datatree>
      </div>
    </div>
    <!--      右侧画布-->
    <div style="float:left;width:76.5%;margin-left:5px;">
      <div
        :style="{width:'100%',height: documentHeight + 'px',background:'#151e2d'}"
      >
        <el-tabs @tab-click="clickTab" v-model="editableTabsValue" type="card" editable @tab-remove="removeTab">
          <el-tab-pane
            :key="item.name"
            v-for="(item, index) in editableTabs"
            :label="item.title"
            :name="item.name"
            :icon="item.icon"
          >
            <component ref="content" @addtabs="addtabs" :tabs="item" :is="item.content" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--      <el-dialog-->
      <!--        :title="nodeTitle"-->
      <!--        :visible.sync="nodedialogVisible"-->
      <!--        width="70%"-->
      <!--        :before-close="nodehandleClose"-->
      <!--        top="10px"-->
      <!--        :close-on-click-modal=false-->
      <!--        class="nodeDialog"-->
      <!--        :onselectstart="false"-->
      <!--      >-->
      <!--        <el-form style="margin-left: 40px" :model="nodename">-->
      <!--          <el-form-item label="节点名称" label-width="80px">-->
      <!--            <el-input style="width: 140px" size="mini" v-model="nodename.name" autocomplete="off"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <span>-->
      <!--            <nodeContainers v-if="nodeType==='Offline Sync'" ref="nodeContainers"></nodeContainers>-->
      <!--            <nodeSql v-if="nodeType==='ClickHouse SQL'"></nodeSql>-->
      <!--          </span>-->
      <!--        <span slot="footer" class="dialog-footer">-->
      <!--          <el-button @click="nodehandleClose()">取 消</el-button>-->
      <!--           <el-button type="primary" @click="saveNode()">确 定</el-button>-->
      <!--        </span>-->
      <!--      </el-dialog>-->
    </div>
  </div>
</template>

<script>
import Print from "@/util/print";
import axios from "axios";
import datatree from "./components/dataDevelopTree.vue";
import treehead from "./components/treehead.vue";
import containers from "./components/runProcess.vue";
import nodeContainers from "./components/nodeContainers.vue";
import nodeSql from "./components/nodesql.vue";

export default {
  name: "demo1",
  components: { datatree, treehead, containers, nodeContainers, nodeSql },
  data() {
    return {
      nodename: {
        name: "",
        nodeId: ""
      },
      value1: "全部",
      value2: "",
      drawer: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      editableTabsValue: "1",
      editableTabs: [],
      tabIndex: 1,
      clickTreeNode: "",
      flowId: "",//流程id
      flowName: "",//流程名
      nodedialogVisible: false,
      nodeTitle: "",
      nodeId: "",//节点id
      mappingValueList: [],
      nodeType: ""
    };
  },
  methods: {
    addtabs(data, type) {
      if (data.data.type === "flow") {
        // this.flowName = data.data.name
        const tag = this.editableTabs.some((item) => {
          return item.name === data.data.name && item.type === "flow";
        });
        if (tag) {
          this.editableTabsValue = data.data.name;
        } else {
          let newTabName = data.data.name;
          this.editableTabs.push({
            flowName: data.data.name,
            flowId: data.data.id,
            type: "flow",
            title: data.data.name,
            name: data.data.name,
            content: containers
          });
          this.editableTabsValue = newTabName;
        }
      }
      if (data.type === "node") {
        this.nodeType = data.data.store.data.data.nodetype;
        this.flowId = data.flowId;
        this.nodeId = data.data.id;
        this.nodeTitle = `节点${data.data.store.data.attrs.label.text}信息`;
        this.nodename.name = data.data.store.data.attrs.label.text;
        this.nodename.nodeId = data.data.id;
        this.nodedialogVisible = true;
        this.getNodeMsg();

      }
    },
    clickTab() {
      this.isLogShow = false;
    },
    nodehandleClose() {
      if (this.$refs.nodeContainers) {
        this.$refs.nodeContainers.restForm();
      }
      this.nodedialogVisible = false;
    },
    removeTab(targetName) {
      if (targetName===''){
        this.editableTabs = []
      }else {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }

    },

    addflow(data) {
      this.clickTreeNode = data;
    },
    getNodeMsg() {
      let querydata = {
        flowInfoId: this.flowId,
        componentSeq: this.nodeId
      };
      this.$http.post("/offlineSync/getSyncOffline", querydata).then((res) => {
        // console.log(res);
        if (res.data) {
          this.$refs.nodeContainers.invertData(res.data);
        }
      });
    },
    getMappingValue() {
      this.$bus.$emit("getMappingValue");
      this.mappingValueList = this.$refs.nodeContainers.$refs.fieldMapping.mappingValueList;
    },
    saveNode() {
      this.getMappingValue();
      let querydata = {
        "flowInfoId": this.flowId,
        "componentSeq": this.nodeId,
        "srcDatasourceId": this.$refs.nodeContainers.dataSourceForm.dataSource,
        "targetDatasourceId": this.$refs.nodeContainers.dataSourceTo.dataSource,
        "srcTableName": this.$refs.nodeContainers.dataSourceForm.dataSourceTable,
        "targetTableName": this.$refs.nodeContainers.dataSourceTo.dataSourceTable,
        "srcWhereParam": this.$refs.nodeContainers.dataSourceForm.srcWhereParam,
        "threads": this.$refs.nodeContainers.passControl.threads,
        "maxError": this.$refs.nodeContainers.passControl.maxError,
        "columnList": this.mappingValueList,
        "src_id_expression": this.$refs.nodeContainers.dataSourceForm.src_id_expression,
        "src_start_id": this.$refs.nodeContainers.dataSourceForm.src_start_id,
        "name": this.nodename.name
      };
      this.$http.post("offlineSync/saveSyncOffline", querydata).then((res) => {
        // console.log(res);
        this.nodedialogVisible = false;
        if (res.code === "200") {
          this.$message.success("保存成功");
        }
      }).finally(() => {
        this.$refs.nodeContainers.restForm();
        this.nodedialogVisible = false;
      }).catch(() => {
        this.nodedialogVisible = false;
      });


    }

  },
  computed: {
    documentHeight() {
      this.$store.getters.documentHeight;
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 130;
    }
  },
  created() {
    this.$bus.$on("removeTabs", (data) => {
      this.removeTab(data);
    });
    this.$bus.$on("addtabs", (data) => {
      this.addtabs(data);
    });
    this.$bus.$on('clearTreeData',()=>{
      this.clickTreeNode = ''
    })
  }

};
</script>

<style scoped>
.htmlstyle {
    word-wrap: break-word;
}

.logStyle {
    overflow: auto;
    z-index: 2001;
    width: 75.8%;
    height: 200px;
    background-color: #27292c;
    position: absolute;
    bottom: 0;
}

.closeButton {
    float: right;
    /*color: #454857;*/
    color: #fff;
}

.showLogButton {
    color: #fff;
    z-index: 2000;
    position: fixed;
    bottom: 0;
    right: 2px;
}

</style>
  